<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css" ref="stylesheet">
  @CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

  </style>
</head>
<body>
  
  <script type="text/javascript">
  					/*
					 * innerText
					 * 	- 该属性可以获取到元素内部的文本内容
					 * 	- 它和innerHTML类似，不同的是它会自动将html去除
					 */
  /**
   * 获取元素节点：
   *  1.document.getElementById():一个
   *  2.document.getElementsByTagName()：一组
   *  3.document.getElementsByName()：一组
   * 通过具体的元素节点调用
   * 4.document.getElementsByTagName()
   * 5. childNodes:属性：当前节点的所有子节点
   * 6. firstChild：属性：当前节点的第一个子节点
   * 7.lastChild:属性：当前节点的最后一个子节点
   * 8.parentNode:属性，获取当前节点的父节点
   * 
   */ 
  window.onload = function () {
    //为id为btn01的按钮绑定一个单击响应函数
      var btn01 = document.getElementById('btn01')
      btn01.onclick = function() {
          //查找#bj节点
          var bj = document.getElementById('bj')
          //打印bj
            //innerHTML 通过这个属性可以获取到元素内部的html代码
            alert(bj.innerHTML)
      };

      //为id为btn02的按钮绑定一个单击响应函数
      var btn02 = document.getElementById("btn02");
          btn02.onclick = function(){
            //查找所有li节点
            //getElementsByTagName()可以根据标签名来获取一组元素节点对象
            //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
            //即使查询到的元素只有一个，也会封装到数组中返回
            var lis = document.getElementsByTagName("li");
            
            //打印lis
            alert(lis.length);
            
            //变量lis
            for(var i=0 ; i<lis.length ; i++){
              alert(lis[i].innerHTML);
            }
          };
          
        //为id为btn03的按钮绑定一个单击响应函数
        var btn03 = document.getElementById('btn03')
        btn03.onclick = function () {
          var gender = document.getElementsByName('gender')
           /*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签，这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性，
						 * 	直接使用 元素.属性名
						 * 		例子：元素.id 元素.name 元素.value
						 * 		注意：class属性不能采用这种方式，
						 * 			读取class属性时需要使用 元素.className
						 */
            for (var i=0;i<gender.length;i++) {
              alert(gender[i].className)
            }
        };

        //为id为btn04的按钮绑定一个单击响应函数
        var btn04 = document.getElementById('btn04')
        btn04.onclick = function () {
          //获取id为city的元素
          var city = document.getElementById('city')
          //查找#city下所有li节点
          var liArr = city.getElementsByTagName('li')
          for (var i=0;i<liArr.length;i++) {
            // alert(liArr[i])
            alert(liArr[i].innerText)
          }
        }
            
      //为id为btn05的按钮绑定一个单击响应函数
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					/*
					 * childNodes属性会获取包括文本节点在内的所有节点
					 * 根据DOM标签标签间空白也会当成文本节点
					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
					 */
          var chileNodes = city.childNodes;
          	// alert(chileNodes.length); // 4个li和5个空行
					
					// for(var i=0 ; i<chileNodes.length ; i++){
					// 	alert(chileNodes[i].innerHTML);
          // }
          
          /*
					 * children属性可以获取当前元素的所有子元素
					 */
					var cns2 = city.children;
					alert(cns2.length); // 4
        };

        //为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					//获取id为phone的元素
					var phone = document.getElementById("phone");
					//返回#phone的第一个子节点
					//phone.childNodes[0];
					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
					var fir = phone.firstChild;
          alert(fir);
					//firstElementChild获取当前元素的第一个子元素
					/*
					 * firstElementChild不支持IE8及以下的浏览器，
					 * 	如果需要兼容他们尽量不要使用
					 */
          //fir = phone.firstElementChild;
        };

        			/*
			 * 定义一个函数，专门用来为指定元素绑定单击响应函数
			 * 	参数：
			 * 		idStr 要绑定单击响应函数的对象的id属性值
			 * 		fun 事件的回调函数，当单击元素时，该函数将会被触发
			 */
			function myClick(idStr , fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
        //为id为btn07的按钮绑定一个单击响应函数
				myClick("btn07",function(){
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
          //返回#bj的父节点
          var parent = bj.parentNode
          alert(parent.innerText)
        })
        
        				//为id为btn08的按钮绑定一个单击响应函数
				myClick("btn08",function(){
					
					//获取id为android的元素
					var and = document.getElementById("android");
					
					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
					var ps = and.previousSibling;
					
					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
					//var pe = and.previousElementSibling;
					
					alert(ps);
					
				});

        				//读取#username的value属性值
				myClick("btn09",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					//读取um的value属性值
					//文本框的value属性值，就是文本框中填写的内容
					alert(um.value);
        });
        
        				//设置#username的value属性值
				myClick("btn10",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					
					um.value = "今天天气真不错~~~";
        });
        
        	//返回#bj的文本值
				myClick("btn11",function(){
					
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					
					// alert(bj.innerHTML);
					//alert(bj.innerText);
					
					//获取bj中的文本节点
					/*var fc = bj.firstChild;
					alert(fc.nodeValue);*/
					
					alert(bj.firstChild.nodeValue);
					
					
				});
  };

  



  </script>
  <div id="total">
    <div class="inner">
      <p>
        你喜欢哪个城市?
      </p>

      <ul id="city">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li>
      </ul>

      <br>
      <br>

      <p>
        你喜欢哪款单机游戏?
      </p>

      <ul id="game">
        <li id="rl">红警</li>
        <li>实况</li>
        <li>极品飞车</li>
        <li>魔兽</li>
      </ul>

      <br />
      <br />

      <p>
        你手机的操作系统是?
      </p>

      <ul id="phone">
        <li>IOS</li>
        <li id="android">Android</li>
        <li>Windows Phone</li>
      </ul>
    </div>

    <div class="inner">
      gender:
      <input class="hello" type="radio" name="gender" value="male"/>
      Male
      <input class="hello" type="radio" name="gender" value="female"/>
      Female
      <br>
      <br>
      name:
      <input type="text" name="name" id="username" value="abcde"/>
    </div>
  </div>
  <div id="btnList">
    <div><button id="btn01">查找#bj节点</button></div>
    <div><button id="btn02">查找所有li节点</button></div>
    <div><button id="btn03">查找name=gender的所有节点</button></div>
    <div><button id="btn04">查找#city下所有li节点</button></div>
    <div><button id="btn05">返回#city的所有子节点</button></div>
    <div><button id="btn06">返回#phone的第一个子节点</button></div>
    <div><button id="btn07">返回#bj的父节点</button></div>
    <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    <div><button id="btn09">返回#username的value属性值</button></div>
    <div><button id="btn10">设置#username的value属性值</button></div>
    <div><button id="btn11">返回#bj的文本值</button></div>
  </div>
</body>
</html>